import type { FC } from 'react';
import { View, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { DropdownConfirmProps } from './types';

import Dialog from '../Dialog';
import Button from '../Button';
import styles from './styles';

const DropdownConfirm: FC<DropdownConfirmProps> = (props) => {
  const {
    title,
    okText = 'Confirm',
    cancelText = 'Cancel'
  } = props;

  return (
    <Dialog {...props} type="bottom">
      {(sizes) => (
        <View style={styles.container}>
          <View style={styles.header}>
            <Button
              size="mini"
              type="text"
              title={cancelText}
              onPress={props.onClose}
              textStyle={{
                ...styles.btn_text,
                ...styles.cancel_text
              }}
            />
            <View style={styles.title_content}>
              {!!title && (
                <Text style={styles.title_text}>
                  {title}
                </Text>
              )}
            </View>
            <Button
              size="mini"
              type="text"
              title={okText}
              onPress={props.onOk}
              textStyle={styles.btn_text}
            />
          </View>
          <SafeAreaView
            style={styles.content}
            edges={{ top: 'off', bottom: 'maximum' }}
          >
            {props.children?.(sizes)}
          </SafeAreaView>
        </View>
      )}
    </Dialog>
  );
}

export default DropdownConfirm;